<template>
  <div class="home">
    <ul class="list">
      <goods
        v-for="(item, index) in list"
        :key="index"
        :item="item"
        @click.native="edit(item, index)"
      />
      <!-- 对于一个组件来说 要想绑定原生的事件 必须加上 .native -->
    </ul>

    <van-popup v-model="show" class="pop">
      <textarea v-model="editvalue" name="" id="" cols="20" rows="5"></textarea>
      <van-button @click="update">确定</van-button>
    </van-popup>
    <!-- 弹出框 里面放了要编辑的多行文本输入框和一个按钮 -->
  </div>
</template>

<script>
import goods from "../components/Good.vue";
export default {
  data() {
    return {
      list: [],
      show: false,
      editvalue: "",
      editindex: -1,
    };
  },
  mounted() {
    this.$axios.get("data.json").then((res) => {
      this.list = res.data.list;
    });
  },
  components: {
    goods,
  },
  methods: {
    edit(item, index) {
      console.log("修改");
      this.show = true;
      this.editvalue = item.title;
      this.editindex = index;
    },
    //点击修改 回填数据 并且保存要修改的下标
    update() {
      this.list[this.editindex].title = this.editvalue;
      this.show = false;
    },
    //点击确定更新数据
  },
};
</script>
<style lang="scss">
.list {
  display: flex;
  flex-wrap: wrap;
  li {
    margin-top: 20px;
    width: 50%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    img {
      width: 80%;
    }
  }
}
.pop {
  padding: 30px;
  background: olivedrab;
}
</style>
